<template>
  <div class="selbill" v-if="config">
    <div class="tab-box">
      <div class="divider-empty-thin"></div>
      <span class="table-title">
        <!-- {{ $srv.getI18nByPath('piece.oQueryLinkSettings.menuconfiguration') }} -->
        <Icon
          class="selbill-btn-add"
          type="ios-add-circle"
          @click="addSelBill"
        />
      </span>

      <div class="selbill-content">
        <div class="selbill-cell" v-for="(item, idx) of config" :key="idx">
          <div class="selbill-left">
            <o-i18n-selector
              class="selbill-action"
              v-model="item.id"
              @on-dochange="saveDetailToConfig"
              :placeholder="
                $srv.getI18nByPath('piece.oQueryLinkSettings.menuname')
              "
            ></o-i18n-selector>
            <o-m2o-editor
              v-model="item.many2one"
              @on-change="saveDetailToConfig"
            ></o-m2o-editor>
            <o-m2o-selector
              v-model="item.action"
              :placeholder="
                $srv.getI18nByPath(
                  'piece.oQueryLinkSettings.eventnameafterselection'
                )
              "
              @on-dochange="saveDetailToConfig"
              :tTable="$srv.globalVar.tableName.PUB_API"
              :tField="$srv.globalVar.fieldName.pubApiName"
              :vField="$srv.globalVar.fieldName.pubApiName"
              :dropdown="true"
            ></o-m2o-selector>
          </div>
          <Icon
            class="selbill-remove"
            type="md-close"
            @click="removeSelBill(idx)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Model, Vue } from 'vue-property-decorator';
import { Tsrv } from '@/services';

@Component
export default class oQueryLinkSetting extends Vue {
  @Model('modelchange') config: any;

  mounted() {}

  private saveDetailToConfig() {
    this.$emit('modelchange', this.config);
    this.$emit('change');
  }

  /**
   * 增加选单配置
   */
  private addSelBill() {
    if (this.config) {
      this.config.push({
        id: '',
        action: '',
        many2one: {}
      });
    }
    this.saveDetailToConfig();
  }

  /**
   * 移除选单配置
   */
  private removeSelBill(index: number) {
    this.config.splice(index, 1);
    this.saveDetailToConfig();
  }
}
</script>

<style scoped lang="scss">
.selbill {
  .selbill-btn-add {
    font-size: 18px;
    // color: #666;
    // position: absolute;
    // right: 0;
    // top: 14px;
    cursor: pointer;
  }
  .selbill-content {
    .selbill-cell {
      display: flex;

      .selbill-left {
        display: flex;
        flex: 1;
        flex-direction: column;
        > div {
          margin-bottom: 10px;
        }
      }
      .selbill-remove {
        line-height: 30px;
        flex-shrink: 0;
        font-size: 18px;
        cursor: pointer;
        margin-left: 10px;
        height: 32px;
      }
    }
  }
}
</style>
